<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>找回密码</title>
  <link rel="stylesheet" href="./css/findpw.css">
  <script src="./lib/jquery.js"></script>
  <script src="./lib/axios.js"></script>
</head>

<body>
  <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
  <div class="hide activeNow">
    <div class="title">
      <span class="active"><i>1</i>输入找回账号</span>
      <span><i>2</i>回答密保问题</span>
      <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
      <div class="input-item">
        <label>请输入手机号：</label>
        <input type="text" id="phone" />
      </div>
      <button id="one">下一步</button>
    </div>
  </div>

  <!----------------------------------------------------->
  <!-- <br> -->
  <!-- <hr> -->
  <div class="hide">
    <div class="title">
      <span><i>1</i>输入找回账号</span>
      <span class="active"><i>2</i>回答密保问题</span>
      <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
      <div class="input-item">
        <label> 用户名：</label>
        <input type="text" value="" disabled />
      </div>
      <div class="input-item">
        <label> 手机号：</label>
        <input type="text" value="" disabled />
      </div>
      <div class="input-item">
        <label>密保问题：</label>
        <input type="text" value="" disabled />
      </div>
      <div class="input-item">
        <label>密保答案：</label>
        <input type="text" id="answer" />
      </div>
      <button data-id="0">上一步</button>
      <button id="two">下一步</button>
    </div>
  </div>

  <!----------------------------------------------------->
  <!-- <br> -->
  <!-- <hr> -->
  <div class="hide">
    <div class="title">
      <span><i>1</i>输入找回账号</span>
      <span><i>2</i>回答密保问题</span>
      <span class="active"><i>3</i>重置密码</span>
    </div>
    <div class="box">
      <div class="input-item">
        <label>请输入新密码：</label>
        <input type="password" />
      </div>
      <button data-id="1">上一步</button>
      <button id="three">立即重置</button>
    </div>
  </div>
</body>
<script src="./lib/findpw.js"></script>

</html>